@import 'theme';
@import 'functions';
@import 'mixins';
@import '~bootstrap/scss/button-group';

// cx-item-counter color variables
$cx-item-counter-border-color: 'light' !default;
$cx-item-counter-border: 1px solid !default;
$cx-item-counter-border-radius: 4px !default;

$cx-item-counter-value-border: 1px solid !default;
$cx-item-counter-value-trbl-padding: 12px 9px 12px 9px !default;
$cx-item-counter-value-height: 46px !default;
$cx-item-counter-value-width: 48px !default;
$cx-item-counter-value-max-width: 78px !default;

$cx-item-counter-action-height: 48px !default;
$cx-item-counter-action-width: 40px !default;
$cx-item-counter-action-color: 'text' !default;
$cx-item-counter-action-background-color: 'transparent' !default;
$cx-item-counter-action-disabled-color: 'light' !default;
$cx-item-counter-action-trbl-margin: 0 0 0 0 !default;

$cx-item-counter-action-trbl-margin: 0 !default;

.cx-item-counter {
  border-radius: $cx-item-counter-border-radius;
  border: $cx-item-counter-border;
  @include var-color('border-color', $cx-item-counter-border-color);
  &__wrapper {
    display: inline-flex;
    flex-direction: column;
  }
  &__error {
    color: #ed3939;
    font-size: 13px;
  }
  &__value {
    border: none;
    text-align: center;
    border-left: $cx-item-counter-value-border;
    border-right: $cx-item-counter-value-border;
    @include var-color('border-left-color', $cx-item-counter-border-color);
    @include var-color('border-right-color', $cx-item-counter-border-color);
    padding: $cx-item-counter-value-trbl-padding;
    max-height: $cx-item-counter-value-height;
    min-width: $cx-item-counter-value-width;
    max-width: $cx-item-counter-value-max-width;
  }
  &__action {
    max-height: $cx-item-counter-action-height;
    min-width: $cx-item-counter-action-width;
    border: none;
    @include var-color('color', $cx-item-counter-action-color);
    @include var-color(
      'background-color',
      $cx-item-counter-action-background-color
    );
    @include type('3');
    margin: $cx-item-counter-action-trbl-margin;

    &:disabled {
      @include var-color('color', $cx-item-counter-action-disabled-color);
      opacity: 1;
    }
  }
}
